import React from "react";
import { ViewProps } from "react-native/Libraries/Components/View/ViewPropTypes";
import { Image, ImageBackground, StyleSheet, Text, View } from "react-native";
import { userInfoData } from "../Data/usercenter_mock_data.ts";
import { AccountEntity } from "../Data";

type UserCenterProps = {
  account: AccountEntity
} & ViewProps

class Header extends React.Component<UserCenterProps> {

  constructor(props: UserCenterProps) {
    super(props);
  }

  render() {
    const userInfoView = userInfoData().map((userInfo, index) =>
      <View key={index} style={{ alignItems: "center", width: "25%" }}>
        <Text style={{ fontSize: 17, color: "black", fontWeight: "500" }}>
          {userInfo.num}
        </Text>
        <Text style={{ fontSize: 12, color: "gray" }}>
          {userInfo.title}
        </Text>
      </View>
    );

    return <View>
      <View style={{ paddingTop: 32, paddingHorizontal: 16, flexDirection: "row" }}>
        <Image
          style={HeaderStyle.avatar}
          source={{ uri: this.props.account.avatarUrl }} />
        <View style={{ marginStart: 8, flex: 1 }}>
          <View style={{ flexDirection: "row" }}>
            <Text style={{ fontSize: 17, fontWeight: "bold", color: "black", flex: 1 }}>
              {this.props.account.nickname()}
            </Text>
            <View style={{
              backgroundColor: "white",
              paddingHorizontal: 6,
              paddingVertical: 4,
              borderRadius: 6,
              marginEnd: 8,
              flexDirection: "row"
            }}>
              <Image style={{ width: 16, height: 16 }} source={require("../img/account_ic_edit.png")} />
              <Text style={{ fontSize: 12, color: "black", marginStart: 2 }}>
                修改资料
              </Text>
            </View>
          </View>
          <Text style={{ fontSize: 12, marginTop: 4 }}>
            {`手机号:${this.props.account.tel} 会员编号:${this.props.account.uid}`}
          </Text>
          <Text style={{
            fontSize: 13,
            width: 52,
            textAlign: "center",
            color: "#0092FF",
            fontWeight: "600",
            paddingVertical: 1,
            backgroundColor: "white",
            marginTop: 8,
            borderRadius: 16
          }}>
            {this.props.account.realNameStatus ? "已实名" : "去实名"}
          </Text>
        </View>
      </View>

      {
        this.props.account.isOpenVip() &&
        <ImageBackground style={{ marginTop: 24 }} source={require("../img/accountc_ic_vip_guide_bg1.webp")}>
          <ImageBackground
            style={{ marginBottom: 16, marginHorizontal: 16, flexDirection: "row", justifyContent: "flex-end" }}
            source={require("../img/accountc_ic_vip_guide_bg2.webp")}>
            <Text style={{
              height: 48,
              color: "#FFE8A8",
              marginStart: 52,
              textAlignVertical: "center",
              fontWeight: "bold",
              flex: 1
            }}>
              开通会员，立享特权
            </Text>

            <Text style={{
              height: 48,
              color: "#FFE8A8",
              textAlign: "left",
              textAlignVertical: "center",
              fontWeight: "bold",
              marginEnd: 16
            }}>
              去开通 &gt;
            </Text>
          </ImageBackground>
        </ImageBackground>
      }
      <View style={{
        backgroundColor: "white",
        borderRadius: 8,
        paddingVertical: 12,
        marginHorizontal: 16,
        flexDirection: "row"
      }}>
        {userInfoView}
      </View>
    </View>;
  }
}

const HeaderStyle = StyleSheet.create({
  avatar: { width: 64, height: 64, borderRadius: 6 },
  name: { fontSize: 17, fontWeight: "bold", color: "black", flex: 1 }
});


export default Header;
